<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>
<script>
<!--1 全局组件的语法糖实现-->
Vue.component("cpn1",{
  template:`
      <div>
        <h2>我是标题1</h2>
        <p>我是内容，哈哈哈</p>
</div>
     `
})
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello vue',
        },
      //1 局部组件的语法糖实现
      components:{
          cpn2:{
            template:`
      <div>
        <h2>我是标题2</h2>
        <p>我是内容，呵呵呵</p>
      </div>
     `
          }
      }

    })
</script>

</body>
</html>